<script setup lang="ts">
import type { ArticleItem, ArticleResData } from '@/types/data';
import axios from 'axios';
import { ref, watch } from 'vue';

const props = defineProps<{ channelID: number }>();

const list = ref<ArticleItem[]>([]);
watch(
    () => props.channelID,
    async () => {
        const res = await axios.get<ArticleResData>(
            `http://geek.itheima.net/v1_0/articles`,
            {
                params: {
                    channel_id: props.channelID,
                    timestamp: Date.now(),
                },
            },
        );
        list.value = res.data.data.results;
    },
    { immediate: true }
);
</script>

<template>
    <div class="article-list">
        <div class="article-item" v-for="item in list" :key="item.art_id">
            <p class="title">{{ item.title }}</p>
            <div v-if="item.cover.type > 0">
                <img class="img" v-for="it in item.cover.images" :src="it" alt="">
            </div>
            <div class="info">
                <span>小兵张嘎</span>
                <span>17评论</span>
                <span>1天前</span>
            </div>
        </div>
    </div>
</template>